<template>
	<view class="page">
		<!-- 状态栏高度 设置背景色 占位状态栏-->
		<view class="ztl"
			:style="{'height':statusBarHeight}"></view>
		<!-- 占位盒子 -->
		<view class=""
			:style="{'height': height}"></view>
		<!-- 导航栏 -->
		<navBar>
			<image :slot="'left'"
				:src="xcxImgUrl && xcxImgUrl+'fanhui.svg'"
				style="width: 36rpx;height: 36rpx;"></image>
			<text :slot="'content'">我的卡卷</text>
		</navBar>

		<!-- 内容 -->
		<view class="main_myCardRoll">
			<u-tabs 
			lineColor='#EC4141'
			lineHeight='5'
			:list="list1" @click='selectTab'></u-tabs>
			<scroll-view 
			scroll-y
			:style="{'height': 'calc(100vh - ' + demoTopHieght +')'}"
			class="main_myCardRoll_list pd10">
				
				<view class="main_myCardRoll_list_item">
					<!-- 未使用背景图 -->
					<image 
					v-if="tabIndex == 0 || tabIndex == 1"
					class="main_myCardRoll_list_item_bg"
					style="width: 100%;height: 100%;"
					:src="xcxImgUrl && xcxImgUrl+'page_activity/static/cardBg.svg'"></image>
					<!-- 已使用背景图 -->
					<image
					v-if="tabIndex == 2 || tabIndex == 3"
					class="main_myCardRoll_list_item_bg"
					style="width: 100%;height: 100%;"
					:src="xcxImgUrl && xcxImgUrl+'page_activity/static/cardBg_hui.svg'"></image>
					
					<view class="main_newcomerBenefits_yhj_content ">
						<view class="main_newcomerBenefits_yhj_content_left">
							<text class="main_newcomerBenefits_yhj_content_left_left">￥</text>
							<text class="main_newcomerBenefits_yhj_content_left_right">80</text>
						</view>
						<view class="main_newcomerBenefits_yhj_content_right pd_left10">
							<text class="main_newcomerBenefits_yhj_content_right_one">新人无门槛优惠劵</text>
							<text  class="main_newcomerBenefits_yhj_content_right_tow">全类品使用</text>
							<text  class="main_newcomerBenefits_yhj_content_right_three">有效期致:2025-12-45 12:45:00</text>
						</view>
					</view>
					
					<view 
					v-if="tabIndex == 0 || tabIndex == 1"
					class="main_myCardRoll_list_item_btn">
						去使用
					</view>
					<!-- 已失效 -->
					<image
					v-if="tabIndex == 0 || tabIndex == 3"
					class="main_myCardRoll_list_item_ysx"
					style="width: 160rpx;height: 120rpx;"
					:src="xcxImgUrl && xcxImgUrl+'page_activity/static/yishixiao.svg'"></image>
					<!-- 已使用 -->
					<image
					v-if="tabIndex == 0 || tabIndex == 2"
					class="main_myCardRoll_list_item_ysy"
					style="width: 160rpx;height: 120rpx;"
					:src="xcxImgUrl && xcxImgUrl+'page_activity/static/yishiyong.svg'"></image>
				</view>
				
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['demoTopHieght']),
		},
		data() {
			return {
				statusBarHeight: '',
				height: '',
				list1: [{
					name: '全部',
				}, {
					name: '待使用',
				}, {
					name: '已使用'
				}, {
					name: '已失效'
				}],
				tabIndex:0,//tab选中下标

			};
		},
		mounted() {
			this.$nextTick(() => {
				// 获取状态栏的高度
				this.statusBarHeight = this.$store.state.statusBarHeight * 2 + 'rpx'
				// 计算站位的高度
				this.height = (this.$store.state.navBarHeight) * 2 + 'rpx'
				//获取高度
				this.Utils.getDemoTopHeight('main_myCardRoll_list')
			})
		},
		methods:{
			//切换tabs
			selectTab(item){
				this.tabIndex = item.index
				console.log(item);
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.u-tabs__wrapper__nav__item{
		flex: 1;
	}
	/deep/.u-tabs__wrapper__nav__line{
		// transform: translate(35.5px)!important;
		width: 25%!important;
		left: -9.5%;
	}
	.main_myCardRoll_list{
		width: 100%;
		box-sizing: border-box;
		
		.main_myCardRoll_list_item{
			width: 100%;
			height: 200rpx;
			box-sizing: border-box;
			position: relative;
			.main_myCardRoll_list_item_bg{
				position: absolute;
				left: 0;
				top: 0;
				z-index: -1;
			}
			.main_newcomerBenefits_yhj_content{
				height: 100%;
				// border-radius: $border_radius_10;
				display: flex;
				.main_newcomerBenefits_yhj_content_left{
					width: 30%;
					height: 100%;
					// background-color: $bg_activity_color;
					border-radius: $border_radius_10;
					color: #FFF;
					display: flex;
					align-items: center;
					justify-content: center;
					.main_newcomerBenefits_yhj_content_left_left{
						font-size: $font_size_14;
					}
					.main_newcomerBenefits_yhj_content_left_right{
						font-size: 60rpx;
						font-weight: bold;
					}
				}
				.main_newcomerBenefits_yhj_content_right{
					flex: 1;
					// background-color: #FFE3E3;
					border-radius: $border_radius_10;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: space-evenly;
					
					.main_newcomerBenefits_yhj_content_right_one{
						color: $text_color_333;
						font-weight: bold;
					}
					.main_newcomerBenefits_yhj_content_right_tow{
						color: $text_color_808080;
						font-size: $font_size_12;
					}
					.main_newcomerBenefits_yhj_content_right_three{
						color: #999999;
						font-size: $font_size_12;
					}
				}
			}
			.main_myCardRoll_list_item_btn{
				color: #FFF;
				font-size: $font_size_14;
				background-color: $bg_activity_color;
				padding: 10rpx 20rpx;
				width: 100rpx;
				position: absolute;
				right: 20rpx;
				bottom: 50%;
				transform: translateY(50%);
				border-radius: 60rpx;
				text-align: center;
			}
			.main_myCardRoll_list_item_ysx,
			.main_myCardRoll_list_item_ysy{
				position: absolute;
				right: 20rpx;
				bottom: 50%;
				transform: translateY(50%);
			}
		}
	}
</style>